<template>
	<view class="serach">
		<u-navbar>
			<view slot="left" class="align-center">
				<image @click="$tools.back()" src="@/static/login/back3.png" style="width: 36rpx; height: 36rpx"></image>
				<view class="align-center" style="margin-left: 32rpx; width: 400rpx; background: #f5f6fa; border-radius: 8rpx; padding: 16rpx 22rpx">
					<view class="flex-center1" style="margin-right: 10rpx">
						<image src="@/static/index/serach1.png" style="width: 30rpx; height: 28rpx"></image>
					</view>
					<input type="text" v-model="searchName" @confirm="init" placeholder="请输入" style="font-weight: 600; font-size: 28rpx; color: #242424" />
				</view>
			</view>
		</u-navbar>
		<view class="flex-around" style="margin: 26rpx 0">
			<view class="flex-center1" @click="addressShow = true" style="flex: 1">
				<view class="align-center">
					<text style="font-weight: 400; font-size: 28rpx; color: #666666; margin-right: 20rpx">城市</text>
					<u-icon name="arrow-down" :bold="true" size="20"></u-icon>
					<address-picker
						:show="addressShow"
						closeOnClickOverlay
						@confirm="confirmAddress"
						@cancel="addressShow = false"
						@close="addressShow = false"
						:address-data="addressData"
						:indexs="indexs"
						:areaId="areaId"
						:type="type"
					></address-picker>
				</view>
			</view>
			<view class="flex-center1" style="flex: 1">
				<view class="align-center">
					<view class="align-center" @click="$tools.navigite('./postjob')">
						<text style="font-weight: 400; font-size: 28rpx; color: #666666; margin-right: 20rpx">岗位类别</text>
						<u-icon name="arrow-down" :bold="true" size="20"></u-icon>
					</view>
					<image
						@click="$tools.navigite('./screen', dateType, workType, salaryStart, salaryEnd)"
						src="@/static/index/screen.png"
						style="width: 44rpx; height: 44rpx; margin-left: 40rpx"
					></image>
				</view>
			</view>
		</view>
		<view style="padding: 20rpx 32rpx; background: #f3f4f8; min-height: 100vh">
			<view @click="$tools.navigite('./detail', item.id)" v-for="(item, index) in list" :key="index" style="padding: 40rpx; background: #fff; margin-bottom: 20rpx">
				<view class="flex" style="margin-bottom: 28rpx">
					<view style="margin-right: 20rpx">
						<image :src="item.image" style="width: 84rpx; height: 84rpx"></image>
					</view>
					<view class="flex-column flex-center" style="flex: 1">
						<view class="flex-between1">
							<text style="font-weight: 600; font-size: 28rpx; color: #333333">{{ item.jobName }}</text>
							<view v-if="!item.collectionStatus" @click.native.stop="shoucang(item)">
								<u-icon name="heart" :bold="true" size="40"></u-icon>
							</view>
							<view v-else @click.native.stop="shoucang(item)">
								<u-icon name="heart-fill" :bold="true" color="red" size="40"></u-icon>
							</view>
						</view>
						<view style="font-weight: 300; font-size: 24rpx; color: #999999">
							{{ item.companyName }} ·
							<text style="font-weight: bold; color: #333333">{{ item.salaryStart }}-{{ item.salaryEnd }}</text>
							/月
						</view>
					</view>
				</view>
				<view class="flex-between1">
					<view>
						<view class="flex" style="margin-bottom: 30rpx">
							<view style="margin-right: 20rpx; padding: 8rpx 20rpx; font-weight: 400; background: #f8f8f8; border-radius: 8rpx; font-size: 24rpx; color: #666666">
								{{ item.label }}
							</view>
						</view>
						<view class="align-center">
							<u-icon name="map-fill" :bold="true" size="28"></u-icon>
							<text style="font-weight: 400; font-size: 28rpx; color: #333333">{{ item.address }}</text>
						</view>
					</view>
					<view>
						<view style="background: rgba(250, 109, 25, 0.1); padding: 8rpx 16rpx; border-radius: 8rpx; margin-bottom: 20rpx">
							<image src="@/static/index/icon1.png" style="width: 22rpx; height: 26rpx"></image>
							<text style="font-size: 24rpx; color: #fa6d1; margin-left: 10rpx">马上报名</text>
						</view>
						<view style="background: rgba(10, 124, 232, 0.1); padding: 8rpx 16rpx; border-radius: 8rpx">
							<image src="@/static/index/icon2.png" style="width: 24rpx; height: 24rpx"></image>
							<text style="font-size: 24rpx; color: #0a7ce8; margin-left: 10rpx">免费拨打</text>
						</view>
					</view>
				</view>
			</view>
			<view style="padding-top: 80rpx" v-if="!list.length">
				<view class="flex-center1" style="margin-bottom: 80rpx">
					<image src="@/static/index/wu.png" style="width: 400rpx; height: 346rpx"></image>
				</view>
				<view class="flex-center1" style="font-weight: 600; font-size: 36rpx; color: #333333; margin-bottom: 12rpx">没有发现结果</view>
				<view class="flex-center1" style="font-weight: 400; font-size: 28rpx; color: #999999">无法找到搜索结果，请更换搜索词</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			address: '',
			addressShow: false,
			indexs: [0, 0, 0],
			areaId: [-1, -1],
			addressData: ['不限', '不限'],
			type: 2, //1-省，2-省市，3-省市区
			list: [],
			isLastPage: false,
			pageNum: 1,
			pageSize: 20,
			workType: 0, //工作类型 1长期 2临时工 3小时工 4计件工 5其他
			searchName: '', //搜索框
			area: '', //区域id
			jobType: [], //岗位类型
			salaryType: '', //薪资范围 1小时 2天 3月 4面议
			salaryStart: '',
			salaryEnd: '',
			dateType: 0 //最后一次更新 1 今天 2一周 3一个月
		};
	},
	onShow() {
		this.init();
	},
	onReachBottom() {
		if (this.isLastPage) return;
		this.pageNum++;
		this.getgw();
	},
	methods: {
		init() {
			this.list = [];
			this.getgw();
		},
		getgw() {
			this.$request('front/search/postList', {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				workType: this.workType,
				searchName: this.searchName,
				area: this.area == -1 ? '' : this.area,
				jobType: this.jobType,
				salaryType: this.salaryType,
				salaryStart: this.salaryStart,
				salaryEnd: this.salaryEnd,
				dateType: this.dateType
			}).then((res) => {
				res.obj.list.map((item, index) => {
					item.image = item.projectImg.split(',')[0];
				});
				this.list = [...this.list, ...res.obj.list];
				console.log(res, '岗位列表');
				this.isLastPage = res.obj.isLastPage;
			});
		},
		confirmAddress(val) {
			console.log(val);
			this.area = val.areaId[1];
			this.addressShow = false;
			this.init();
		},
		async shoucang(item) {
			await this.collect(item.id, 1);
			await setTimeout(() => {
				this.init();
			}, 500);
		}
	}
};
</script>

<style lang="less" scoped>
.serach {
	padding-top: 180rpx;
}
</style>
